import { Button, Checkbox, Form, Input, Space, Select } from 'antd';
import React, { useEffect, useState } from "react";
// import { Form } from "react-router-dom";
import 'antd/dist/antd.less'
import "../assets/styles/Edit.less"
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import axios from 'axios';
import cookie from "react-cookies"
import Item from 'antd/lib/list/Item';
import { useForm } from 'antd/es/form/Form';


// function addReportForm() {
//     return (<WeeklyReportEdit />)
// }
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};


// function PlanForm() {
//     // axios.defaults.withCredentials = true;
//     const onFinishPlan = (values) => {
//         console.log(values);
//         console.log("satoken=" + cookie.load("satoken"))
//         axios({
//             method: 'post',
//             url: "http://localhost:8080/isLogin",
//             headers: { "satoken": cookie.load("satoken") },
//             data: values
//         }).then((response => {
//             console.log(response)
//         }))
//     };
//     return (<div className='FormBox'>
//         <Form {...layout}
//             wrapperCol={{ span: 24 }}
//             onFinish={onFinishPlan}
//         >

//             <Form.List name="plan_forms">
//                 {(fields, { add, remove }) => (
//                     <>
//                         {fields.map(({ key, name, ...restField }) => (
//                             <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
//                                 <Form.Item

//                                     {...restField}
//                                     name={[name, 'report_week']}
//                                     rules={[{ required: true, message: '必填' }]}
//                                 >
//                                     <Input placeholder="日期（周时间段）" />
//                                 </Form.Item>
//                                 <Form.Item
//                                     {...restField}
//                                     name={[name, 'working_affairs']}
//                                     rules={[{ required: true, message: '必填' }]}
//                                 >
//                                     <Input placeholder="工作事项" />
//                                 </Form.Item>
//                                 <Form.Item                                     {...restField}
//                                     name={[name, 'estimated_finish_time']}
//                                     rules={[{ required: true, message: '必填' }]}>
//                                     <Input placeholder="预计完成时间" />
//                                 </Form.Item>
//                                 {/* <Form.Item                                    {...restField}
//                         name={[name, 'current_progress']}
//                         rules={[{ required: true, message: '必填' }]}>
//                         <Input placeholder="目前完成情况" />
//                     </Form.Item> */}
//                                 <Form.Item                                    {...restField}
//                                     name={[name, 'person_in_charge']}
//                                 >
//                                     <Input placeholder="负责人" />
//                                 </Form.Item>
//                                 <Form.Item                                    {...restField}
//                                     name={[name, 'remarks']}
//                                 >
//                                     <Input placeholder="备注" />
//                                 </Form.Item>
//                                 <MinusCircleOutlined onClick={() => remove(name)} />
//                             </Space>
//                         ))}
//                         <Form.Item>
//                             <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
//                                 Add field
//                             </Button>
//                         </Form.Item>
//                     </>
//                 )}
//             </Form.List>
//             <Form.Item>
//                 <Button type="primary" htmlType="submit">
//                     Submit
//                 </Button>
//             </Form.Item>
//         </Form></div>)
// }

// function ProgForm() {
//     const onFinishProg = (values) => {
//         // values.seesionId = 
//         console.log('Received values of form:', values);
//         console.log(typeof (values));
//         axios.post('http://localhost:8080/isLogin',
//             values).then((response => { console.log(response) }))
//         // ).then((response => {

//         // }))
//     };

//     return (
//         <div className='FormBox'>
//             <Form {...layout}
//                 wrapperCol={{ span: 24 }}
//                 onFinish={onFinishProg}
//             >

//                 <Form.List name="progress_forms">
//                     {(fields, { add, remove }) => (
//                         <>
//                             {fields.map(({ key, name, ...restField }) => (
//                                 <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
//                                     <Form.Item

//                                         {...restField}
//                                         name={[name, 'report_week']}
//                                         rules={[{ required: true, message: '必填' }]}
//                                     >
//                                         <Input placeholder="日期（周时间段）" />
//                                     </Form.Item>
//                                     <Form.Item
//                                         {...restField}
//                                         name={[name, 'working_affairs']}
//                                         rules={[{ required: true, message: '必填' }]}
//                                     >
//                                         <Input placeholder="工作事项" />
//                                     </Form.Item>
//                                     <Form.Item                                     {...restField}
//                                         name={[name, 'estimated_finish_time']}
//                                         rules={[{ required: true, message: '必填' }]}>
//                                         <Input placeholder="预计完成时间" />
//                                     </Form.Item>
//                                     <Form.Item                                    {...restField}
//                                         name={[name, 'current_progress']}
//                                         rules={[{ required: true, message: '必填' }]}>
//                                         <Input placeholder="目前完成情况" />
//                                     </Form.Item>
//                                     <Form.Item                                    {...restField}
//                                         name={[name, 'person_in_charge']}
//                                     >
//                                         <Input placeholder="负责人" />
//                                     </Form.Item>
//                                     <Form.Item                                    {...restField}
//                                         name={[name, 'remarks']}
//                                     >
//                                         <Input placeholder="备注" />
//                                     </Form.Item>
//                                     <MinusCircleOutlined onClick={() => remove(name)} />
//                                 </Space>
//                             ))}
//                             <Form.Item>
//                                 <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
//                                     Add field
//                                 </Button>
//                             </Form.Item>
//                         </>
//                     )}
//                 </Form.List>
//                 <Form.Item>
//                     <Button type="primary" htmlType="submit">
//                         Submit
//                     </Button>
//                 </Form.Item>
//             </Form>
//         </div>
//     )
// }

function ReportForm() {
    const onFinishPlan = (values) => {
        console.log(form.getFieldsValue);
        console.log(values);
        console.log("satoken=" + cookie.load("satoken"))
        axios({
            method: 'post',
            url: "http://localhost:8080/edit/save",
            headers: { "satoken": cookie.load("satoken") },
            data: values
        }).then((response => {
            console.log(response)
        }))
    };

    const [record, setRecord] = useState([])
    const getRecords = () => {
        let records;
        axios({
            method: 'post',
            url: "http://localhost:8080/edit/getForm",
            headers: { "satoken": cookie.load("satoken") }
        }).then((response => {
            records = response.data;
            setRecord([...records])
            console.log(records)
            console.log(record)
        }))
    }
    const [form] = useForm()
    useEffect(() => {
        getRecords()
        console.log(record)
        // form.setFieldValue(record)

    }, [])



    return (<div className='FormBox'>
        <Form {...layout}
            wrapperCol={{ span: 24 }}
            onFinish={onFinishPlan}
            form={form}
        >

            <Form.List name="reportForms">
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, ...restField }) => (
                            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                <Form.Item                                     {...restField}
                                    name={[name, 'report_type']}
                                    rules={[{ required: true, message: '必填' }]}>
                                    <Select
                                        placeholder="选择类型"
                                        allowClear>
                                        <Select.Option value='1'>本周进展</Select.Option>
                                        <Select.Option value='2'>下周规划</Select.Option>
                                    </Select>
                                </Form.Item>
                                {/* <Form.Item

                                    {...restField}
                                    name={[name, 'report_week']}
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Input placeholder="日期（周时间段）" />
                                </Form.Item> */}
                                <Form.Item
                                    {...restField}
                                    name={[name, 'working_affairs']}
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Input placeholder="工作事项" />
                                </Form.Item>
                                <Form.Item                                     {...restField}
                                    name={[name, 'estimated_finish_time']}
                                    rules={[{ required: true, message: '必填' }]}>
                                    <Input placeholder="预计完成时间" />
                                </Form.Item>
                                <Form.Item                                     {...restField}
                                    name={[name, 'current_progress']}
                                    rules={[{ required: false, message: '选填' }]}>
                                    <Input placeholder="目前进展" />
                                </Form.Item>
                                <Form.Item                                    {...restField}
                                    name={[name, 'person_in_charge']}
                                >
                                    <Input placeholder="负责人" />
                                </Form.Item>
                                <Form.Item                                    {...restField}
                                    name={[name, 'remarks']}
                                >
                                    <Input placeholder="备注" />
                                </Form.Item>
                                <MinusCircleOutlined onClick={() => remove(name)} />
                            </Space>
                        ))}
                        <Form.Item>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                Add field
                            </Button>
                        </Form.Item>
                    </>
                )}
            </Form.List>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    保存
                </Button>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>
        </Form></div>)
}



function WeeklyReportEdit() {
    return (
        <div className="OutBox">
            {/* <h1>本周进展</h1>
            <ProgForm />
            <h1>下周规划</h1>
            <PlanForm /> */}
            <h1>周报填写</h1>
            <ReportForm />
        </div>
    )
}
export default WeeklyReportEdit;